<template>
	<view class="order bg-white">
		<view class="title uni-divider uni-flex" style="height: 40upx;padding-top: 8upx;justify-content:space-between">
			<text class="uni-bold">当前委托</text>
		</view>
		<view class="item uni-divider" v-for="(item,index) in formartOkOrder" :key="index" v-if="okOrderList!=null&&okOrderList.length!=0">
			<view class="opt">
				<view class="uni-h4 uni-bold uni-up buy" style="color: #00B48E" v-if="item.type == '1'">买入{{item.leverage}}X</view>
				<view class="uni-h4 uni-bold uni-down sell" style="color: #D14B64" v-if="item.type == '2'">买入开空{{item.leverage}}X</view>
				<view class="uni-h4 uni-bold uni-down sell" style="color: #D14B64" v-if="item.type == '3'">卖出平多{{item.leverage}}X</view>
				<view class="uni-h4 uni-bold uni-up buy" style="color: #00B48E" v-if="item.type == '4'">卖出平空{{item.leverage}}X</view>
				<view class="uni-h6 uni-text-gray uni-common-pl">{{item.formartDate}}</view>
				<button class="cancel" @click="cancelOrder(item.algo_id)">撤 消</button>
			</view>
			<view class="tbody">
				<view class="ttr">
					<view class="td">
						<view class="tname">委托总量</view>
						<view class="tval">{{item.size}}</view>
						<view class="tunit">张</view>
					</view>
					<view class="td">
						<view class="tname">委托价格</view>
						<view class="tval">{{item.trigger_price}}</view>
						<view class="tunit">usdt</view>
					</view>
				</view>
				<view class="ttr">
					<view class="td">
						<view class="tname">触发价格</view>
						<view class="tval">{{item.algo_price}}</view>
						<view class="tunit">usdt</view>
					</view>
					<view class="td">
						<view class="tname"></view>
						<view class="tval"></view>
						<view class="tunit"></view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			type: {
				type: Number,
				default: 1
			},
		},
		data() {
			return {
				openStatus: this.type,
				okOrderList: [],
				instrument: null
			}
		},
		watch: {
			type(val) {
				this.openStatus = val
			}
		},
		mounted() {
			this.fresh()
			uni.$on("orderFresh", this.fresh)
		},
		computed: {
			formartOkOrder: function() {
				if (typeof(this.okOrderList) != "undefined") {
					console.log("okOrderList" + this.okOrderList)
					for (let s of this.okOrderList) {
						s.formartDate = this.t2d(s.timestamp)
						s.avgPrice = s.filled_notional == "0" ? "-" : Number(s.filled_notional / s.filled_size).toFixed(4)
						s.unit = s.instrument_id.split('-')[0]
					}
				}
				return this.okOrderList
			}
		},
		methods: {
			cancelOrder(orderId) {
				var _self = this
				uni.showLoading({
					title: "撤单中"
				})
				var req = {
					instrument_id: _self.getDefaultSpot().instrumentId,
					order_type: "1",
					algo_ids: [orderId]
				}
				console.log("cancelOrder " + orderId)
				uni.request({
					url: _self.api + "/apis/okex/authed?simpleUrl=/api/spot/v3/cancel_batch_algos",
					method: 'POST',
					header: {
						"Authorization": "Bearer " + _self.getToken()
					},
					data: req,
					success: res => {						
						_self.getOkOrders()
						uni.hideLoading()
					}
				});
			},
			t2d(value) { //04-03 10:53
				var datetime = new Date(value);

				var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
				var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
				var hour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
				var minute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
				var second = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
				var result = month + '-' + date + ' ' + hour + ":" + minute
				return result
			},
			getOkOrders() {
				uni.request({
					url: this.api + '/apis/okex/authed?simpleUrl=/api/spot/v3/algo?instrument_id=' + this.getDefaultSpot().instrumentId +
						'%26order_type=1%26status=1',
					method: 'GET',
					header: {
						"Authorization": "Bearer " + this.getToken()
					},
					data: {},
					success: res => {
						console.log('getOkOrders Resps:')
						console.log(res.data.data)
						this.okOrderList=[]
						if (res.data.data) {
							for (let key in res.data.data) {
								console.log('get ok order key' + key)
								let result = res.data.data[key]
								if (result.length > 0) {
									console.log('getOkOrders Resps Content:')
									this.okOrderList = result
									console.log(this.okOrderList)
								}
							}

						}
					}
				});
			},

			fresh: function() {
				this.instrument = this.getDefaultSpot()
				this.getOkOrders()
			}

		}
	}
</script>

<style scoped>
	.order .title {
		padding: 0 20upx 20upx 20upx;
	}

	.order .item {
		padding: 20upx 20upx 20upx 20upx;
	}

	.order .item .opt {
		position: relative;
		display: flex;
		align-items: baseline;
	}


	.order .item .opt .cancel {
		position: absolute;
		top: 0;
		right: 0;
		width: 80upx;
		height: 50upx;
		line-height: 50upx;
		font-size: 24upx;
		padding: 0;
		background-color: #CBCBC9;
	}

	.detail {
		position: absolute;
		top: 0;
		right: 100upx;
		width: 80upx;
		height: 50upx;
		line-height: 50upx;
		font-size: 24upx;
		padding: 0;
		background-color: #3B81F7;
		color: #FFFFFF;
	}

	.trigger {
		position: absolute;
		top: 0;
		right: 200upx;
		width: 80upx;
		height: 50upx;
		line-height: 50upx;
		font-size: 24upx;
		padding: 0;
		background-color: #3B81F7;
		color: #FFFFFF;
	}

	.order .item .thead {
		display: flex;
		color: #8e9fa7;
	}

	.order .item .price {
		width: 35%;
	}

	.order .item .num {
		width: 35%;
	}

	.order .item .turnover {
		width: 30%;
		text-align: right;
	}

	.tbody {
		display: flex;
		flex-direction: column;
	}

	.td view {
		font-size: 24upx;
		flex: 1;
	}

	.td .tunit {
		text-align: left;
	}

	.tname {
		color: #848484;
		width: 30%;
	}

	.tunit {
		color: #848484;
	}

	.buy {
		color: #00B48E;
	}

	.sell {
		color: #D14B64;
	}

	.ttr {
		display: flex;
		flex-direction: row;
		flex: 1;
	}

	.ttr .td {
		flex: 1;
		display: flex;
		flex-direction: row;
	}
</style>
